(function () {

    var onlineAll=online;//将数据存储一份
    var lessonUl = U.getId('lessonUl')//渲染数据的盒子

    var pageNum=U.getId('pageNum')//渲染分页的盒子

    var fenlei=U.getId('fenlei')//按学科选择盒子
    var fenleiLi=fenlei.querySelectorAll('li');
    console.log(fenleiLi)

    for(var i=0;i<fenleiLi.length;i++){
        fenleiLi[i].onclick=function(){
            //改样式
            for(var i=0;i<fenleiLi.length;i++){
                U.removeClass(fenleiLi[i].children[0],'active')
               
            }
            U.addClass(this.children[0],'active')

            var attr=this.getAttribute('obj')//学科类型
            if(attr=='1'){
                onlineAll=online
            }
            else{
                onlineAll=online.filter(function(item){
                 return   item.subject==attr;
                })
            }
            init(1)
        }
    }

    init(1)
    function init(page){
        // var page = 1;//当前页
    var rowNumm = onlineAll.length;//总条数
    var pageSize = 6;//每页条数
    var allPage = Math.ceil(rowNumm / pageSize);//总页数

    var curArr = onlineAll.slice((page - 1) * pageSize, page * pageSize)//当前对应页码的数据

    viewList(curArr)//渲染数据
     viewPage(page,allPage)//渲染分页（当前页，总页数）
    }
    function viewList(arr) {
        var str=''
        arr.forEach(function (item) {
            str += `<li>
            <a href='videoDetail.html'>
           <div class="top">
               <img src="${item.src}" alt="${item.title}" class="m">
               <p>${item.num}人在学习</p>
           </div>
           <div class="bottom">
               <div class="left">
                   <span>${item.title}</span>
                   <span class="time">${item.title}课时</span>
               </div>
               <div class="right ${item.isFree ? '' : 'on'}">${item.isFree ? '免费学习' : '收费学习'}</div>
           </div>
           </a>
       </li>`;

        });
       lessonUl.innerHTML=str;
    }

    function viewPage(page,allPage){
        // console.log(page,allPage)
        var str=` <button class="${page==1 ? '': 'active'}">上一页</button><ul>`
       
        for( var i=1;i<=allPage;i++){
            if(i===page){
                str+=`<li class="active">${i}</li>`
            }else{
                str+=`<li>${i}</li>`
            }
           

        }
        str+=`</ul><button class="${page==allPage ? '': 'active'}">下一页</button>`;

        pageNum.innerHTML=str;


        var btn=pageNum.querySelectorAll('button')
        var li=pageNum.querySelectorAll('li')

        btn[0].onclick=function(){
           if(U.hasClass(this,'active')){
               init(--page)
           }
        }

        btn[1].onclick=function(){
            if( U.hasClass(this,'active')){
                init(++page)
            }
         }

         for(var i=0;i<li.length;i++){
            //  li[i].index=i;
             li[i].onclick=function (){
                 if( U.hasClass(this,'active')){
                     return
                 }
                init(this.innerText/1)
             }
         }
    }
})()